<template>
	<BpmComponent :processInstanceId="processInstanceId">
		<template #approval-info>
			<up-form labelPosition="left" labelWidth="120" v-if="Object.keys(formData).length > 0">
				<up-form-item v-for="field in formFields" :key="field.key" :label="field.label" borderBottom>
					<!-- 如果是附件 -->
					<view v-if="field.isDocument && formData[field.key]" class="file-actions">
						<!-- 如果是数组 -->
						<template v-if="field.isArray">

							<view v-for="(item, idx) in formData[field.key]" :key="idx" class="file-item">
								<text class="file-link" @click="previewFile(item, formData[field.key]?.[idx])">
									{{ getFileName(formData[field.key][idx], { isUrl: true }) || '无' }}
								</text>
							</view>
						</template>

						<!-- 如果不是数组 -->
						<template v-else>
							<text class="file-link" @click="previewFile(formData[field.key])">
								{{ getFileName(formData[field.key], { isUrl: true }) || '无' }}
							</text>
						</template>
					</view>
					<!-- 普通字段 -->
					<text v-else>
						{{ field.format ? field.format(formData[field.key]) : formData[field.key] || '无' }}
					</text>
				</up-form-item>
			</up-form>
		</template>
	</BpmComponent>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref, unref, reactive, nextTick, getCurrentInstance } from 'vue'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { getAccessToken } from '@/utils/auth'
import * as UserApi from '@/api/system/user'
import BpmComponent from '@/components/processInstance/detail/index.vue'
import { VehicleSafetyApi, VehicleSafetyVO } from '@/api/safety/vehicleMonitoring'
import { formatDate } from '@/utils/formatTime'
import { getFileName, parseArrayField, previewFile } from '@/utils/fileUtils'


const userList = ref<any[]>([]) // 用户列表
const processInstanceId = ref(null)// 流程实例的编号
const id = ref(null)
const formData = ref<VehicleSafetyVO>({} as any)
const formFields = [


	{ label: '车主姓名', key: 'ownerName' },
	{ label: '车牌号', key: 'licensePlate' },
	{ label: '车主电话', key: 'ownerPhone' },
	{ label: '线路', key: 'line' },
	{ label: '线路类型', key: 'lineType' },
	{
		label: 'GPS是否完好',
		key: 'gpsIsGood',
		format: (val: any) => val === 1 ? '是' : '否', // 可根据ID映射昵称
	},
	{ label: '驾驶员姓名', key: 'driverName' },
	{ label: '驾驶员身份证', key: 'driverIdCard' },
	{ label: '监控员姓名', key: 'monitorName' },
	{ label: '发起时间', key: 'startTime', format: (val: any) => formatDate(val, 'YYYY-MM-DD HH:mm:ss') },
	{ label: '安全教育人员', key: 'safetyEducationName' },
	{ label: '安全教育时间', key: 'safetyEducationTime', format: (val: any) => formatDate(val, 'YYYY-MM-DD') },
	{ label: '安全教育备注', key: 'safetyEducationRemark' },
	{ label: '教育附件', key: 'attachmentsName', isDocument: true },
	{ label: '安全监测人', key: 'inspectorName' },
	{ label: '安全检测附件', key: 'checkReportName', isDocument: true },
	{ label: '安全检测备注', key: 'safetyEducationRemark' },
	// {
	// 	label: '安全检测人',
	// 	key: 'inspectorName',
	// 	format: (val: any) => userList.value.find(item => item.id == val)?.nickname, // 可根据ID映射昵称
	// },
	// { label: '安全检测人电话', key: 'inspectorPhone' },
	// {
	// 	label: '车辆监控确认人员',
	// 	key: 'vehicleMonitor',
	// 	format: (val: any) => userList.value.find(item => item.id == val)?.nickname, // 同上
	// },
	// {
	// 	label: '附件',
	// 	key: 'attachments',
	// 	isDocument: true,
	// },
	{ label: '备注', key: 'remark' },
];

// 新增图片类型判断
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
const unsupportedExtensions = [
	// 压缩包类型
	'zip', 'rar', '7z', 'tar', 'gz',
	// 可执行文件类型
	'exe', 'bat', 'cmd', 'sh', 'msi',
	// 其他二进制文件
	'dmg', 'iso', 'bin'
]

// 新增文件扩展名提取方法
const getFileExtensionOrName = (fileUrlOrName: string, type?: any) => {
	// 去除URL参数
	const cleanUrl = fileUrlOrName.split('?')[0];

	// 提取文件名
	const fileName = cleanUrl.split('/').pop() || '';

	const parts = fileName.split('.')
	// return parts.length > 1 ? parts.pop()!.toLowerCase() : ''
	return type == 'fileName' ? fileName : parts.length > 1 ? parts.pop()!.toLowerCase() : ''
}

// 修改后的文件类型判断方法
const getFileType = (fileName: string) => {
	const extension = getFileExtensionOrName(fileName)

	if (imageExtensions.includes(extension)) {
		return 'image'
	}

	switch (extension) {
		case 'pdf': return 'pdf'
		case 'doc': case 'docx': return 'doc'
		case 'xls': case 'xlsx': return 'xls'
		case 'ppt': case 'pptx': return 'ppt'
		default: return ''
	}
}
// 修改后的预览方法
// const previewFile = async (fileUrl: string, fileName?: string) => {
// 	// 提取文件名
// 	const finalFileName = fileName || getFileExtensionOrName(fileUrl, 'fileName');
// 	console.log('fileUrl', fileUrl);
// 	console.log('finalFileName', finalFileName);

// 	try {
// 		const extension = getFileExtensionOrName(finalFileName || fileUrl)
// 		// 检查不支持的类型
// 		if (unsupportedExtensions.includes(extension)) {
// 			uni.showToast({
// 				title: '该文件类型不支持预览',
// 				icon: 'none',
// 				duration: 2000
// 			})
// 			return
// 		}
// 		// 如果是图片类型
// 		if (imageExtensions.includes(extension)) {
// 			uni.previewImage({
// 				current: fileUrl,
// 				urls: [fileUrl]
// 			})
// 			return
// 		}

// 		// 文档类型保持原有逻辑
// 		uni.showLoading({ title: '正在加载文件...', mask: true })
// 		const { tempFilePath } = await uni.downloadFile({
// 			url: fileUrl,
// 			header: {
// 				'Authorization': 'Bearer ' + getAccessToken()
// 			}
// 		})

// 		await uni.openDocument({
// 			filePath: tempFilePath,
// 			fileType: getFileType(finalFileName),
// 			showMenu: true
// 		})

// 	} catch (error) {
// 		console.error('文件预览失败:', error)
// 		uni.showToast({
// 			title: '文件预览失败',
// 			icon: 'none',
// 			duration: 2000
// 		})
// 	} finally {
// 		uni.hideLoading()
// 	}
// }

const getDict = (type: any, value: any) => {
	const dicts = getIntDictOptions(type)
	const dict = dicts.find(item => item.value === value)
	return dict ? dict.label : ''
}
onLoad(async (options) => {
	processInstanceId.value = options?.processInstanceId
	id.value = options?.id
	// 加载用户列表
	userList.value = await UserApi.getSimpleUserList()
	/** 获得详情 */
	getDetailById()
})
/** 获取页面详情 */
const getDetailById = async () => {
	try {
		const data = await VehicleSafetyApi.getVehicleSafety(Number(id.value))
		formData.value = data
		console.log('data', data);
		formData.value.eids = parseArrayField(data.eids);
		formData.value.ename = parseArrayField(data.ename);
		console.log('formData.value', formData.value);


	} catch (error) {
		console.log('加载数据失败')
	}
}
</script>

<style>
/* 样式 */
/* 新增文件链接样式 */
.file-link {
	color: #007AFF;
	text-decoration: underline;
	cursor: pointer;
}

.uv-node {
	height: 34rpx;
	width: 34rpx;
	border-radius: 50%;
	background-color: #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0;
	z-index: -1;
}

.audit-node {
	margin: 5px 0;
}
</style>